import React, { useEffect, useState } from 'react'
import {
    getExamSubject,
    getExamType,
    getQuestionsType,
    getQuestionsCondition,
    getQuestionsNew
} from '../../api/exam'
import { Button, Select, Table, Tag, Space } from 'antd'
import './look_exam.css'

const { Option } = Select

const columns = [
    {
        title: '课程类型',
        dataIndex: 'subject_text',
        key: 'subject_text',
        render: text => <a>{text}</a>,
    },
    {
        title: '考试类型',
        dataIndex: 'exam_name',
        key: 'exam_name',
    },
    {
        title: '题目乐行',
        dataIndex: 'questions_type_text',
        key: 'questions_type_text',
    },
    {
        title: '题目',
        dataIndex: 'questions_stem',
        key: 'questions_stem',
    }
];

export default function LookExam() {
    const [list, setList] = useState([])
    const [count, setCount] = useState(0)
    const [flag, setFlag] = useState(false)
    const [tableList, setTableList] = useState([])
    // 试题类型id
    const [subject_id, setSubjectId] = useState("")
    // 考试类型id
    const [exam_id, setExamId] = useState("")
    // 试题类型id
    const [questions_type_id, setQuestionId] = useState("")

    // 考试类型列表
    const [examList, setExamList] = useState([])
    // 试题类型列表
    const [questionList, setQuestionList] = useState([])
    useEffect(() => {
        getExamSubject().then(res => {
            setList(res.data.data)
        })
        getExamType().then(res => {
            setExamList(res.data.data)
        })
        getQuestionsType().then(res => {
            setQuestionList(res.data.data)
        })
    }, [])

    const changeCount = (index, id) => {
        setCount(index)
        setSubjectId(id)
    }

    const selectAll = () => {
        setFlag(!flag)
    }

    const handleChange = (value) => {
        setExamId(value)
    }

    const handleChange2 = (value) => {
        setQuestionId(value)
    }

    // 搜索试题
    const search = () => {
        // 判断是否全选
        if (flag) {
            getQuestionsNew().then(res => {
                console.log(res)
            })
        } else {
            getQuestionsCondition({
                questions_type_id,
                subject_id,
                exam_id
            }).then(res => {
                let arr = res.data.data
                arr.forEach(item => {
                    item.key = item.subject_text
                })
                setTableList(arr)
            })
        }

    }
    return (
        <div>
            <h4>
                查看试题
            </h4>
            <div className='flex'>
                <div className='sub_type'>
                    课程类型:
                </div>
                <div className='items'>
                    <span className={flag ? 'active' : ''}
                        onClick={() => {
                            selectAll()
                        }}>All</span>
                    {
                        list.map((item, index) => {
                            return <span
                                className={flag ? 'active' : count === index ? 'active' : ''}
                                onClick={() => {
                                    changeCount(index, item.subject_id)
                                }}
                                key={item.subject_id}>
                                {item.subject_text}
                            </span>
                        })
                    }
                </div>
            </div>

            <div>
                <p>
                    考试类型:
                </p>
                <div>
                    <Select style={{ width: 120 }} onChange={handleChange}>
                        {
                            examList.map(item => {
                                return <Option key={item.exam_id}
                                    value={item.exam_id}>
                                    {item.exam_name}
                                </Option>
                            })
                        }
                    </Select>
                </div>
            </div>

            <div>
                <p>
                    题目类型:
                </p>
                <div>
                    <Select style={{ width: 120 }} onChange={handleChange2}>
                        {
                            questionList.map(item => {
                                return <Option key={item.questions_type_id}
                                    value={item.questions_type_id}>
                                    {item.questions_type_text}
                                </Option>
                            })
                        }
                    </Select>
                </div>
            </div>
            <div>
                <Button className='mt15' type="primary" onClick={search}>搜索</Button>
            </div>

            <div className='mt15'>
                <Table columns={columns} dataSource={tableList} />
            </div>
        </div>
    )
}
